<template>
  <div>
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label="选择时间范围" prop="startTime" label-width="100">
        <el-date-picker
          v-model="queryParams.startTime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="总楼层阈值" prop="re" label-width="60">
        <el-input placeholder="请输入内容" v-model="queryParams.re" clearable>
        </el-input>
      </el-form-item>
      <el-form-item label="单楼层阈值" prop="rt" label-width="60">
        <el-input placeholder="请输入内容" v-model="queryParams.rt" clearable>
        </el-input>
      </el-form-item>
      <el-button type="primary" @click="show">更新图表</el-button>
    </el-form>

    <div class="cont">
      <div class="left">
      <div :id="workDaySE" :style="{ minWidth: width, height: height }"></div>
      <div :id="workDaySS" :style="{ minWidth: width, height: height }"></div>
    </div>
      </div>
      <div class="right">
      <div :id="workDayS" :style="{ minWidth: width, height: height }"></div>
      <div :id="workDayE" :style="{ minWidth: width, height: height }"></div>
      </div>
    </div>
    
  </div>
</template>

<script>
let moment = require('moment')
export default {
  name: 'his1',
  data() {
    return {
      chart: '',
      Day:'',
      Day2:'',
      Day3:'',
      Day4:'',
      loading: false,
      workDaySS: 'workDaySS',
      workDaySE: 'workDaySE',
      workDayS: 'workDayS',
      workDayE: 'workDayE',
      width: 70 + '%',
      height: 38 + 'vh',
      queryParams: {
        startTime: [],
        re: null,
        rt: null,
      },
    }
  },
  async created() {
    let startTime = '2021-05-01',
      endTime = '2021-12-10',
      reCount = 10,
      rtCount = 5;

      this.$axios
        .post(
          `api/realTest/findOneStartToEnd?startTime=` +
            startTime +
            '&endTime=' +
            endTime +
            '&reCount=' +
            reCount +
            '&rtCount=' +
            rtCount
        )
        .then((res) => {
          console.log(res);
          let {arr,GZRS,GZRE,FGZRS,FGZRE} = this.processData(res.data.data)
          this.createChart(arr,GZRS,GZRE,FGZRS,FGZRE)
        })
  },
  methods: {
    processData(data){
        let obj = {}
        let s = '00:00:00'
        for (let i = 0; i < 1440; i++) {
          obj[s] = 0
          s = moment(s, 'HH:mm:ss')
            .add(15, 'm')
            .format('HH:mm:ss')
        }
        obj['23:59:59'] = 0
        let arr = Object.keys(obj)
        // console.log(arr);
          let gzr = data['工作日']
          let fgzr = data['非工作日']

          let gzrs = JSON.parse(JSON.stringify(obj))
          let gzre = JSON.parse(JSON.stringify(obj))
          let fgzrs = JSON.parse(JSON.stringify(obj))
          let fgzre = JSON.parse(JSON.stringify(obj))

          for(let j of gzr){
            let testGzrS = j['onedaystart'].slice(11,19)
            let testGzrE = j['onedayend']?j['onedayend'].slice(11,19):''
            for(let i = 0;i<arr.length-1;i++){
              if(testGzrE && moment(testGzrS,"HH:mm:ss").isBetween(moment(arr[i],"HH:mm:ss.SSS"),moment(arr[i+1]+'.111',"HH:mm:ss.SSS"),null, '[)')){
                gzrs[arr[i]] === 0?gzrs[arr[i]]=1:gzrs[arr[i]] = gzrs[arr[i]]+1; 
                // continue
              }
              if(testGzrE && moment(testGzrE,"HH:mm:ss").isBetween(moment(arr[i],"HH:mm:ss.SSS"),moment(arr[i+1]+'.111',"HH:mm:ss.SSS"),null, '[)')){
                gzre[arr[i]] === 0?gzre[arr[i]]=1:gzre[arr[i]] = gzre[arr[i]]+1;
                // continue        
              }
            }
          }
          // console.log(gzrs,gzre);
          for(let j of fgzr){
            let testFgzrS = j['onedaystart'].slice(11,19)
            let testFgzrE = j['onedayend']?j['onedayend'].slice(11,19):''
            for(let i = 0;i<arr.length-1;i++){
              if(testFgzrS && moment(testFgzrS,"HH:mm:ss").isBetween(moment(arr[i],"HH:mm:ss.SSS"),moment(arr[i+1]+'.111',"HH:mm:ss.SSS"),null, '[)')){
                fgzrs[arr[i]] === 0?fgzrs[arr[i]]=1:fgzrs[arr[i]] = fgzrs[arr[i]]+1;        
                // continue
              }
              if(testFgzrE && moment(testFgzrE,"HH:mm:ss").isBetween(moment(arr[i],"HH:mm:ss.SSS"),moment(arr[i+1]+'.111',"HH:mm:ss.SSS"),null, '[)')){
                fgzre[arr[i]] === 0?fgzre[arr[i]]=1:fgzre[arr[i]] = fgzre[arr[i]]+1;
                // continue        
              }
            }
          }
          let GZRS = Object.values(gzrs)
          let GZRE = Object.values(gzre)
          let FGZRS = Object.values(fgzrs)
          let FGZRE = Object.values(fgzre)
          return {arr,GZRS,GZRE,FGZRS,FGZRE}
    },
    show() {
      if (this.Day != null && this.Day != '' && this.Day != undefined &&
          this.Day2 != null && this.Day2 != '' && this.Day2 != undefined &&
          this.Day3 != null && this.Day3 != '' && this.Day3 != undefined &&
          this.Day4 != null && this.Day4 != '' && this.Day4 != undefined 
      ) {
        this.Day.dispose() //销毁
        this.Day2.dispose() //销毁
        this.Day3.dispose() //销毁
        this.Day4.dispose() //销毁
      }
      let { startTime, re, rt } = this.queryParams
      this.$axios
        .post(
          `api/realTest/findOneStartToEnd?startTime=` +
            moment(startTime[0]).format('YYYY-MM-DD') +
            '&endTime=' +
            moment(startTime[1]).format('YYYY-MM-DD') +
            '&reCount=' +
            re +
            '&rtCount=' +
            rt
        )
        .then((res) => {
          console.log('输入表单',res);
          let {arr,GZRS,GZRE,FGZRS,FGZRE} = this.processData(res.data.data)

          this.createChart(arr,GZRS,GZRE,FGZRS,FGZRE)
        })
    },
    createChart(arr,gzrs,gzre,fgzrs,fgzre,title) {
      this.Day = this.$echarts.init(document.getElementById(this.workDaySE))
      this.Day2 = this.$echarts.init(document.getElementById(this.workDaySS))
      this.Day3 = this.$echarts.init(document.getElementById(this.workDayS))
      this.Day4 = this.$echarts.init(document.getElementById(this.workDayE))
      function dataOptions (arr,data,title){
        // console.log(arr,data);
        return {
              title:{
                text: title
              },
              tooltip: {
              trigger: 'axis',
              axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                  type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
              }
          },
          xAxis: [
              {
                  type: 'category',
                  data: arr,
                  axisTick: {
                      alignWithLabel: true
                  },
                  show:false,
                  position: 'bottom',
              },
              {
                  type: 'category',
                  data: ['0:00','06:00','12:00','18:00','24:00'],
                  boundaryGap: false,
                  axisTick: {
                      alignWithLabel: true
                  },
                  show:true,
                  position: 'bottom',
              },
          ],
          yAxis: [
              {
                  type: 'value'
              }
          ],
          series: [
              {
                  name: '直接访问',
                  type: 'bar',
                  data: data,
                  barWidth: "5",
              }
          ],
          dataZoom: [
            {
                show: true,
                realtime: true,
                start: 0,
                end: 100,
                // zoomLock:true,
            },
            
        ],
      }}

      let option = dataOptions(arr,gzrs,'工作日首次开启')
      let option2 = dataOptions(arr,gzre,'工作日首次关闭')
      let option3 = dataOptions(arr,fgzrs,'非工作日首次开启')
      let option4 = dataOptions(arr,fgzre,'非工作日首次关闭')

      option && this.Day.setOption(option)
      option2 && this.Day2.setOption(option2)
      option3 && this.Day3.setOption(option3)
      option4 && this.Day4.setOption(option4)
    },
  },
}
</script>

<style scoped>
.cont{
  width: 100vh;

}
.left{
  box-sizing: border-box;
  float: left;
  min-width: 47vw;
  min-height:80vh;
  background-color: aquamarine;
}
.right{
  box-sizing: border-box;
  min-width: 47vw;
  float:right;
  min-height:80vh;
  background-color: blanchedalmond;
}



</style>
